<template>
  <div v-loading="!topicData" class="forum_content">
    <template v-if="topicData">
      <div class="forum_content_nav" v-html="topicData.title"></div>
      <div class="forum_content_section">
        <div style="white-space: pre-wrap" v-html="topicData.content"></div>
        <div class="forum_content_section_edit">
          编辑于{{ topicData.updatedAt || topicData.createdAt }}
        </div>
        <div class="forum_content_section_option">
          <div class="article_list_option_button">
            <i class="el-icon-chat-dot-square"></i>评论{{ topicData.nums || 0 }}
          </div>
          <div
            @click="likeTopic"
            :class="[
              'article_list_option_button',
              {
                isClick: topicData.fabulous,
              },
            ]"
          >
            <i class="el-icon-star-on"></i>喜欢{{ topicData.likeQuantity || 0 }}
          </div>
          <div
            @click="favouriteTopic"
            :class="[
              'article_list_option_button',
              {
                isClick: topicData.collection,
              },
            ]"
          >
            <i class="el-icon-s-flag"></i>收藏{{
              topicData.favouriteQuantity || 0
            }}
          </div>
        </div>
      </div>
      <!--评论互动区-->
      <commentContent
        @updateStatus="updateStatus"
        @updateComment="updateComment"
        :topicData="topicData"
      ></commentContent>
    </template>
  </div>
</template>

<script>
import commentContent from "./commentContent";
import { findTopicById, favouriteTopic, likeTopic } from "@/api/topic";
export default {
  name: "forumContent",
  components: {
    commentContent,
  },
  data() {
    return {
      topicData: null,
    };
  },
  created() {
    this.findTopicById();
  },
  methods: {
    updateStatus(data) {
      this.topicData.commentList.forEach((item) => {
        if (item.id === data.id) {
          item.reply = !item.reply;
        } else {
          item.reply = false;
        }
      });
    },
    updateComment(data) {
      this.topicData.commentList = this.topicData.commentList || [];
      this.$set(data, "reply", false);
      this.topicData.commentList.push(data);
    },
    findTopicById() {
      this.topicData = null;
      findTopicById(this.$route.query.id).then((response) => {
        if (response.data.code === 20000) {
          if (response.data.results.commentList) {
            response.data.results.commentList.forEach((item) => {
              this.$set(item, "reply", false);
            });
          }
          this.topicData = response.data.results;
        }
      });
    },
    favouriteTopic() {
      favouriteTopic({ topicId: this.topicData.id }).then((response) => {
        if (!this.topicData.collection) {
          this.$message.success({
            message: "已收藏",
          });
          this.topicData.collection = true;
          this.topicData.favouriteQuantity = this.topicData.favouriteQuantity
            ? this.topicData.favouriteQuantity + 1
            : 1;
        } else {
          this.$message.success({
            message: "已取消",
          });
          this.topicData.collection = false;
          this.topicData.favouriteQuantity -= 1;
        }
      });
    },
    likeTopic() {
      likeTopic({ topicId: this.topicData.id }).then((response) => {
        if (!this.topicData.fabulous) {
          this.$message.success({
            message: "已喜欢",
          });
          this.topicData.fabulous = true;
          this.topicData.likeQuantity = this.topicData.likeQuantity
            ? this.topicData.likeQuantity + 1
            : 1;
        } else {
          this.$message.success({
            message: "已取消",
          });
          this.topicData.fabulous = false;
          this.topicData.likeQuantity -= 1;
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.forum_content {
  color: #333;

  .forum_content_nav {
    font-weight: bold;
    font-size: 16px;
  }

  .forum_content_subheading {
    font-size: 14px;
    color: gray;
    margin-top: 10px;
  }

  .forum_content_section {
    margin-top: 20px;

    .forum_content_section_img {
      width: 100%;
      margin-bottom: 10px;

      img {
        width: 100%;
      }
    }

    .forum_content_section_text {
      font-size: 14px;
      line-height: 24px;
    }

    .forum_content_section_edit {
      margin-top: 50px;
      color: #808080;
    }

    .forum_content_section_option {
      display: flex;
      justify-content: center;
      margin: 20px 0;

      .article_list_option_button {
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
}
.isClick {
  color: #01540c;
}
</style>
